@import '../basic/globalVar.scss';
@import '../reset-default/index.scss';
@import '../mixins/index.scss';

@mixin button-type($type) {
  $background-color: $--color-white;
  $font-color: $--color-text-default;
  $border-color: $--button-border-color-default;
  @if ($type == 'primary') {
    $background-color: $--color-primary;
    $font-color: $--color-white;
    $border-color: $--button-border-color-primary;
  } @else if ($type == 'danger') {
    $background-color: $--color-danger;
    $font-color: $--color-white;
    $border-color: $--button-border-color-danger;
  } @else if ($type == 'warning') {
    $background-color: $--color-warning;
    $font-color: $--color-white;
    $border-color: $--button-border-color-warning;
  } @else if ($type == 'success') {
    $background-color: $--color-success;
    $font-color: $--color-white;
    $border-color: $--button-border-color-success;
  } @else if ($type == 'info') {
    $background-color: $--color-info;
    $font-color: $--color-white;
    $border-color: $--button-border-color-info;
  } @else if ($type == 'text') {
    $background-color: transparent;
    $font-color: $--button-font-color-text;
    $border-color: transparent;
  }

  background-color: $background-color;
  color: $font-color;
  border-color: $border-color;

  $hover-background-color: mix(
    $--color-white,
    $background-color,
    $--button-hover-percent
  );
  $hover-font-color: $--color-white;
  $hover-border-color: mix(
    $--color-white,
    $border-color,
    $--button-hover-percent
  );

  $active-background-color: mix(
    $--color-black,
    $background-color,
    $--button-active-percent
  );
  $active-font-color: $--color-white;
  $active-border-color: mix(
    $--color-black,
    $border-color,
    $--button-active-percent
  );

  $disabled-background-color: mix($background-color, $--color-white);
  $disabled-font-color: $--color-white;
  $disabled-border-color: mix($border-color, $--color-white);

  @if ($type == 'default') {
    $hover-background-color: $--color-white;
    $hover-font-color: $--color-primary;
    $hover-border-color: $--color-primary;

    $active-background-color: $--color-white;
    $active-font-color: mix(
      $--color-black,
      $--color-primary,
      $--button-active-percent
    );
    $active-border-color: mix(
      $--color-black,
      $--color-primary,
      $--button-active-percent
    );

    $disabled-background-color: $--color-white;
    $disabled-font-color: $--color-text-disabled;
    $disabled-border-color: $--border-color-disabled;
  } @else if ($type == 'text') {
    $hover-background-color: transparent;
    $hover-font-color: mix($--color-black, $--button-font-color-text, 10%);
    $hover-border-color: transparent;

    $active-background-color: transparent;
    $active-font-color: mix($--color-black, $--button-font-color-text, 20%);
    $active-border-color: transparent;

    $disabled-background-color: transparent;
    $disabled-font-color: $--color-text-disabled;
    $disabled-border-color: transparent;
  }

  &:not(.is-disabled):not(.is-loading):hover,
  &:not(.is-disabled):not(.is-loading):focus {
    color: $hover-font-color;
    background-color: $hover-background-color;
    border-color: $hover-border-color;
  }

  &:not(.is-disabled):not(.is-loading):active {
    color: $active-font-color;
    background-color: $active-background-color;
    border-color: $active-border-color;
  }

  &.is-disabled,
  &.is-loading {
    &,
    &:hover,
    &:focus,
    &:active {
      cursor: not-allowed;
      color: $disabled-font-color;
      background-color: $disabled-background-color;
      border-color: $disabled-border-color;
    }
  }
}

@mixin button-size($size) {
  $height: $--height-default;
  $padding-horizontal: $--button-padding-horizontal-default;
  $font-size: $--font-size-default;
  $border-radius: $--border-radius-default;
  @if ($size == 'mini') {
    $height: $--height-mini;
    $padding-horizontal: $--button-padding-horizontal-mini;
    $font-size: $--font-size-mini;
  } @else if ($size == 'small') {
    $height: $--height-small;
    $padding-horizontal: $--button-padding-horizontal-small;
    $font-size: $--font-size-small;
  } @else if ($size == 'large') {
    $height: $--height-large;
    $padding-horizontal: $--button-padding-horizontal-large;
    $font-size: $--font-size-large;
  }
  height: $height;
  // line-height: $height;
  padding-left: $padding-horizontal;
  padding-right: $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  @include b(circle, false, true) {
    width: $height;
    border-radius: $height;
    padding: 0;
  }
  @include b(circle-text, false, true) {
    width: auto;
    padding: 0 $padding-horizontal;
  }
}
@include classNameConnect(button) {
  display: inline-block;
  line-height: 1;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all $--animation-time ease-in-out;
  border-width: $--border-width-default;
  border-style: $--border-style-default;
  & [class*='b-icon-'] {
    & + span {
    }
  }
  @include b(type-default) {
    @include button-type(default);
  }
  @include b(type-primary) {
    @include button-type(primary);
  }
  @include b(type-danger) {
    @include button-type(danger);
  }
  @include b(type-warning) {
    @include button-type(warning);
  }
  @include b(type-success) {
    @include button-type(success);
  }
  @include b(type-info) {
    @include button-type(info);
  }
  @include b(type-text) {
    @include button-type(text);
  }
  @include b(size-mini) {
    @include button-size(mini);
  }
  @include b(size-small) {
    @include button-size(small);
  }
  @include b(size-default) {
    @include button-size(default);
  }
  @include b(size-large) {
    @include button-size(large);
  }
  @include b(block) {
    width: 100%;
    display: block;
  }
}
